<template>
  <section
    class="!bg-transparent border border-[var(--el-border-color)] rounded-md grid grid-rows-[auto_1fr] h-full overflow-hidden">
    <header
      class="!h-[38px] flex items-center justify-between text-[14px] pl-[20px] font-700 text-[var(--el-text-color-primary)] bg-[url('@/assets/bi_images/box-header-bg.png')] bg-no-repeat bg-center bg-[length:100%_100%]"
    >
      <div>
        <slot name="title">
          <span>{{ title }}</span>
        </slot>
      </div>
      <div class="flex items-center gap-2">
        <slot name="header-extra"/>
      </div>
    </header>
    <div class="panel-body min-h-0 h-full overflow-auto !bg-[#112f5c] rounded p-2">
      <slot/>
    </div>
  </section>
</template>

<script setup lang="ts">
defineProps<{ title?: string }>();
</script>

<style scoped></style>
